<template>
  <div class="Electric">
    <div class="tit">
      <div class="litt" style="background-color: #fd7f86;">
        <div>正向有功电量 (kWh)</div><div class="num">{{ entityval.curkWhRec?parseFloat((+entityval.curkWhRec).toFixed(2)):'' }} </div>
      </div>
      <div class="litt" style="background-color: #ffd45d;">
        <div>正向无功电量 (kvarh)</div><div class="num">{{ entityval.curkVarhRec?parseFloat((+entityval.curkVarhRec).toFixed(2)):'' }} </div>
      </div>
      <div class="litt" style="background-color: #5cbdff;">
        <div>反向有功电量 (kWh)</div><div class="num">{{ entityval.curkWhDel?parseFloat((+entityval.curkWhDel).toFixed(2)):'' }}</div>
      </div>
      <div class="litt" style="background-color: #9b71ff;">
        <div>反向无功电量 (kvarh)</div><div class="num">{{ entityval.curkVarhDel?parseFloat((+entityval.curkVarhDel).toFixed(2)):'' }}</div>
      </div>
    </div>
    <div class="data">
      <el-radio-group v-model="radio3" size="small" @change="getechart">
        <el-radio-button v-for="(item,index) in radiolist" :key="index" :label="item.name"></el-radio-button>
      </el-radio-group>
      <div class="echarts" ref="echartrefs"></div>
      <div class="table">
        <TableColumn  :tableConfig="tableConfig"
           :tableData="tableData" ref="tablecolumn">
          </TableColumn>
      </div>
      <div class="fenye">
        <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageNo"
            @current-change="getdatalist"
            :total="total"
            :page-size="10"
          >
          </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {gethistoylistapi,gethistoyechartapi} from '@/api/system/HistoryList'
import TableColumn from '@/components/Table'
import {GetEcharts} from '@/utils/echarts'
export default {
  name: 'CallPoliceElectric',
  props: {
    treeval: {
      type: Object,
      default:()=>{}
    },
    form: {
      type: Object,
      default:()=>{}
    },
  },
  components:{TableColumn},
  data() {
    return {
      radio3: '正向有功总电能',
      radiolist: [
        {name:'正向有功总电能',color:'#fd7f86'},
        {name:'正向无功总电能',color:'#ffd45d'},
        {name:'反向有功总电能',color:'#5cbdff'},
        {name:'反向无功总电能',color:'#9b71ff'},
      ],
      tableData:[],
      tableConfig: [
      { label: '设备', prop: 'deviceName' },
      { label: '时间', prop: 'date' ,center:'center'},
      { label: '正向有功电量(kWh)', prop: 'curkWhRec' ,center:'right'},
      { label: '正向无功电量(kVarh)', prop: 'curkVarhRec' ,center:'right'},
      { label: '反向有功电量(kWh)', prop: 'curkWhDel' ,center:'right'},
      { label: '反向无功电量(kVarh)', prop: 'curkVarhDel' ,center:'right'},
      ],
      pageNo: 0,
      total: 0,
      array: [],
      entityval: {},
      val: {},
      row:{}
    };
  },

  mounted() {
  },

  methods: {
    async getchushi(val, row) {
      this.val = val
      this.row=row
      const dateString=row.radio3=='1'?row.value1:row.radio3=='2'?row.value2:row.value3
      const { data: { list } } = await gethistoylistapi({ dateString, dateType: row.radio3, deviceId: val.id, tag: '1' })
      this.getdatalist()
      this.array=list
      this.getechart()
    },
    async getdatalist() {
      const dateString=this.row.radio3=='1'?this.row.value1:this.row.radio3=='2'?this.row.value2:this.row.value3
      const {data:{list,entity,totalCount}}=await gethistoyechartapi({ dateString, dateType: this.row.radio3, deviceId: this.val.id, tag: '1' ,pageNo:this.pageNo-1,pageSize:10})
      this.tableData = list ? list : []
      this.total=totalCount
      this.entityval=entity?entity:{}
    },
    getechart() {
      const val=this.radiolist.find(ele=>ele.name==this.radio3)
      const arr = this.array?.find(ele=>ele.name == this.radio3)?.datalist
      const xAxislist = arr?.map(ele => ele.timeReading)
      const datalist=arr?.map(ele=>ele.valueReading)
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top:'20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {right:'3%'},
        xAxis: {
          type: 'category',
          data: xAxislist
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:val.name,
            data: datalist,
            type: 'bar',
            color:val.color,
          }
        ]
      };
      GetEcharts(this,this.$refs.echartrefs,option)
    }
  },
};
</script>
<style lang="scss" scoped>
.Electric{
  height: 100%;
  // padding: 10px;
  .tit{
    display: flex;
    justify-content: space-between;
    .litt{
      width: calc(25% - 20px);
      margin: 10px;
      height: 90px;
      border-radius: 10px;
      color: #fff;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .num{
        font-size: 20px;
        margin-top: 5px;
      }
    }
  }
  .data{
    padding: 10px;
    height: calc(100% - 120px);
    .echarts{
      height: 260px;
      margin-bottom: 20px;
    }
    .table{
      height: calc(100% - 320px);
    }
    .fenye{
      text-align: right;
    }
  }
}
</style>